<template>
  <div class="dashboard-container">
    <!-- <component :is="currentRole" /> -->
    <el-col :span="12">
      <el-col :span="12" style="padding: 0 10px 0 0">
        <el-card :body-style="{ height: '190px' }" class="total-number">
          <div class="number-imgame">
            <img style="width: 68px" :src="img3" class="image" />
          </div>
          <div style="padding: 14px">
            <span class="title-total">设备总数</span>
            <span>{{ deal_message.totalInfo.runState.totals }}</span>
            <div class="total-item">
              <el-col :span="12"
                ><span>启用</span
                ><router-link tag="a" :to="'/device-basic/index'"
                  ><el-link type="primary">{{
                    deal_message.totalInfo.runState.starts
                  }}</el-link></router-link
                ></el-col
              >
              <el-col :span="12"
                ><span>停用</span
                ><router-link tag="a" :to="'/device-basic/index'"
                  ><el-link type="primary">{{
                    deal_message.totalInfo.runState.stops
                  }}</el-link></router-link
                ></el-col
              >
              <el-col :span="12">
                <span>
                  <el-tooltip
                    :content="'正常运转设备=设备运行状态【正常、空转、工作中】总和'"
                    :placement="'top'"
                  >
                    <i class="el-icon-info" style="cursor: pointer"></i>
                  </el-tooltip>
                  正常运转</span
                ><router-link tag="a" :to="'/device-basic/index'"
                  ><el-link type="primary">{{
                    deal_message.totalInfo.runState.normals
                  }}</el-link></router-link
                ></el-col
              >
              <el-col :span="12"
                ><span>停机</span
                ><router-link tag="a" :to="'/device-basic/index'"
                  ><el-link type="primary">{{
                    deal_message.totalInfo.runState.crashs
                  }}</el-link></router-link
                ></el-col
              >
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card :body-style="{ height: '190px' }" class="total-number-2">
          <div class="number-imgame">
            <img style="width: 68px" :src="img2" class="image" />
          </div>
          <div style="padding: 14px">
            <span class="title-total">启用计划</span>

            <div class="total-item">
              <el-col :span="12"
                ><span>启用巡检计划</span
                ><router-link tag="a" :to="'/device-patrol/plan'"
                  ><el-link type="primary">{{
                    deal_message.totalInfo.planCountNum.startedPatrols
                  }}</el-link></router-link
                ></el-col
              >
              <el-col :span="12"
                ><span>启用点检计划</span
                ><router-link tag="a" :to="'/plant-check/plan'"
                  ><el-link type="primary">{{
                    deal_message.totalInfo.planCountNum.startedChecks
                  }}</el-link></router-link
                ></el-col
              >
              <el-col :span="12"
                ><span>启用保养计划</span
                ><router-link tag="a" :to="'/device-preserve/plan'"
                  ><el-link type="primary">{{
                    deal_message.totalInfo.planCountNum.startedPreserves
                  }}</el-link></router-link
                ></el-col
              >
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="24" class="total-number-1">
        <el-col :span="12">
          <el-card :body-style="{ height: '190px' }">
            <div style="padding: 14px">
              <span class="title-total">维修单</span>
              <span>{{ deal_message.totalInfo.orderCountNum.repairNum }}</span>
              <div class="total-item">
                <el-col :span="12"
                  ><span>待维修</span
                  ><router-link tag="a" :to="'/device-repair/repairItems/index'"
                    ><el-link type="primary"
                      ><span>{{
                        deal_message.totalInfo.orderCountNum
                          .repairNumByWaitRepair
                      }}</span></el-link
                    ></router-link
                  ></el-col
                >
                <el-col :span="12"
                  ><span>维修中</span
                  ><router-link tag="a" :to="'/device-repair/repairItems/index'"
                    ><el-link type="primary"
                      ><span>{{
                        deal_message.totalInfo.orderCountNum.repairNumByRepair
                      }}</span></el-link
                    ></router-link
                  ></el-col
                >
                <el-col :span="12"
                  ><span>待验收</span
                  ><router-link tag="a" :to="'/device-repair/repairItems/index'"
                    ><el-link type="primary"
                      ><span>{{
                        deal_message.totalInfo.orderCountNum
                          .repairNumByWaitCheck
                      }}</span></el-link
                    ></router-link
                  ></el-col
                >
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card :body-style="{ height: '190px' }" class="repaired-total">
            <div class="number-imgame-1">
              <img style="width: 68px" :src="img1" class="image" />
            </div>
            <div style="padding: 14px 0">
              <span class="title-total">维护单</span>
              <span>{{ deal_message.totalInfo.orderCountNum.mainNum }}</span>
              <div class="total-item">
                <el-col :span="12"
                  ><span>待维护</span
                  ><router-link tag="a" :to="'/device-repair/maintenance/index'"
                    ><el-link type="primary"
                      ><span>{{
                        deal_message.totalInfo.orderCountNum.mainNumByWaitMain
                      }}</span></el-link
                    ></router-link
                  ></el-col
                >
                <el-col :span="12"
                  ><span>维护中</span
                  ><router-link tag="a" :to="'/device-repair/maintenance/index'"
                    ><el-link type="primary"
                      ><span>{{
                        deal_message.totalInfo.orderCountNum.mainNumByMain
                      }}</span></el-link
                    ></router-link
                  ></el-col
                >
                <el-col :span="12"
                  ><span>待验收</span
                  ><router-link tag="a" :to="'/device-repair/maintenance/index'"
                    ><el-link type="primary"
                      ><span>{{
                        deal_message.totalInfo.orderCountNum.mainNumByWaitCheck
                      }}</span></el-link
                    ></router-link
                  ></el-col
                >
              </div>
            </div>
          </el-card>
        </el-col>
      </el-col>
    </el-col>
    <el-col :span="12">
      <div class="unfinished-item">
        <h-table-list
          type="local"
          :data="deal_message.list"
          :page-sizes="[3, 10]"
          :columns="columns"
          :paginationInfo="paginationInfo"
          :form-options="formOptions"
        >
          <!-- <ListOpearteButton /> -->
          <p class="title-total">待办事项</p>
          <template slot="operate-column" slot-scope="scope">
            <el-button type="text" @click="gotoRouter(scope.row)"
              >去处理</el-button
            >
          </template>
        </h-table-list>
      </div>
    </el-col>
    <el-col :span="12">
      <el-col :span="12">
        <el-card class="total-number-img">
          <div style="padding: 14px">
            <p class="title-total">设备类别占比</p>
            <div class="total-item-chart">
              <PieChart
                v-if="deal_message.totalInfo.typePercent"
                :data="pieData"
                :dataType="pieDataType"
              />
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card :body-style="{ height: '190px' }" class="total-number-img-1">
          <div style="padding: 14px">
            <p class="title-total">近七日故障趋势</p>
            <div class="total-item-chart">
              <LineChart v-if="deal_message.totalInfo.trendFault" />
            </div>
          </div>
        </el-card>
      </el-col>
    </el-col>
    <el-col :span="12">
      <div class="rencentSeven-item">
        <h-table-list
          border
          type="local"
          :data="deal_message.bugList"
          :page-sizes="[5, 10]"
          :columns="columns2"
          :paginationInfo="paginationInfo2"
        >
          <p class="title-total">近7日故障明细</p>
          <template slot="preview-column" slot-scope="scope">
            <p
              @click="
                {
                  {
                    scope.row.id;
                  }
                }
              "
            >
              去处理
            </p>
          </template>
        </h-table-list>
      </div>
    </el-col>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
//import adminDashboard from './admin'
//import editorDashboard from './editor'
import PieChart from "./components/pieChart";
import LineChart from "./components/lineChart";
import { formaStateType, formatDealType } from "@/filters/index";
import a from "./a.png";
import b from "./b.png";
import d from "./d.png";
import { getRouterByType } from "./const";
export default {
  name: "Dashboard",
  components: { PieChart, LineChart },
  data() {
    return {
      pieData: [],
      pieDataType: [],
      img1: a,
      img2: b,
      img3: d,
      //     totalData:[{
      //       title:"设备总数",
      //       img:a
      //     },{
      //  title:"设备总数",
      //  img:b
      //     },{
      //  title:"维修单",
      //  img:d
      //     },{
      //  title:"维护单",
      //  img:d
      //     }],
      currentRole: "adminDashboard",
      tableData: [],
      formOptions: {
        inline: true,
        submitBtnText: "查询",
        showResetBtn: false,
        showSearchBtn: false,
        searchParamsHandler: (params) => {
          console.log("查询");
          //this.getList(this.$store.state.deviceBasic.listSearchParams);
          this.$store.dispatch(
            "deal_message/requestList",
            Object.assign({ size: 3 }, params)
          );
        },
      },
      paginationInfo: {
        sizeChange: (e) => {
          console.log(e);
        },
        currentChange: (e) => {
          this.$store.dispatch("deal_message/requestList", {
            current: e,
            size: 3,
          });
        },
        current: 1,
        total: 0,
      },
      paginationInfo2: {
        sizeChange: (e) => {
          console.log(e);
        },
        currentChange: (e) => {
          this.$store.dispatch("deal_message/resuestBugList", {
            current: e,
            size: 5,
          });
        },
        current: 1,
        total: 0,
      },
      columns: [
        { type: "index", label: "序号" },
        {
          prop: "labelName",
          width: 200,
          label: "任务类型",
          render: (row) => {
            return formatDealType(row.typeId) + formaStateType(row.state);
          },
        },
        {
          prop: "createdBy",
          label: "创建人",
        },
        {
          prop: "createdTime",
          label: "创建时间",

          filter: "formatDate",
        },
        {
          prop: "operate",
          label: "操作",
          //minWidth: 180,
          slotName: "operate-column",
          //fixed: "right",
        },
      ],
      columns2: [
        //  { type: "index", label: "序号" },
        {
          prop: "deviceName",
          label: "设备名称",
        },

        {
          prop: "assetNumber",
          label: "设备编号",
        },
        {
          prop: "createdTime",
          label: "故障发生时间",
          filter: "formatDate",
        },
        {
          prop: "faultDesc",
          label: "故障描述",
        },
        {
          prop: "faultType",
          label: "故障种类",
        },
        {
          prop: "faultLevel",
          label: "故障等级",
        },
      ],
    };
  },
  computed: {
    ...mapGetters(["roles"]),
    ...mapState(["deal_message"]),
  },
  created() {
    if (!this.roles.includes("admin")) {
      this.currentRole = "editorDashboard";
    }
    this.getList();
  },
  methods: {
    gotoRouter(row) {
      console.log(row.extJson, "点击数据");

      if (row.state == 2 && row.typeId == 5) {
        localStorage.setItem(getRouterByType(8), row.toDoId);
        this.$router.push(getRouterByType(8));
      } else if (
        (row.state == 2 && row.typeId == 6) ||
        (row.state == 4 && row.typeId == 6) ||
        (row.state == 3 && row.typeId == 6)
      ) {
        //维修验收
        localStorage.setItem(getRouterByType(9), row.toDoId);
        this.$router.push(getRouterByType(9));
      } else if (
        (row.state == 2 && row.typeId == 7) ||
        (row.state == 4 && row.typeId == 7)
      ) {
        //维护验收
        localStorage.setItem(getRouterByType(10), row.toDoId);
        this.$router.push(getRouterByType(10));
      } else {
        localStorage.setItem(getRouterByType(row.typeId), row.toDoId);
        this.$router.push(getRouterByType(row.typeId));
      }
    },
    async getList() {
      await this.$store.dispatch("deal_message/requestList", { size: 3 });
      const data = await this.$store.dispatch("deal_message/resuestBugList");
      const bugData = await this.$store.dispatch(
        "deal_message/questDashBoardInfo"
      );

      //this.pieData=this.$store.state.deal_message.totalInfo.trendFault.map(e=>{return e.day})
      //this.pieData=this.$store.state.deal_message.totalInfo.typePercent.map(e=>{return e.typeName})
      //this.pieDataType=this.$store.state.deal_message.totalInfo.typePercent.map(e=>{return {value:e.totals,name:e.typeName}})
      this.$set(
        this.paginationInfo,
        "total",
        this.$store.state.deal_message.total
      );
      this.$set(
        this.paginationInfo2,
        "total",
        this.$store.state.deal_message.bugTotal
      );
    },
  },
};
</script>
<style lang="scss">
.el-card {
  border-radius: 0.25rem;
  border: 0 solid #e6ebf5;
  background-color: #fff;
  overflow: hidden;
  color: #303133;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.total-number {
  position: relative;
  border-left: 5px solid #42e0fc;

  height: 190px;
  .total-item {
    color: #999;
    position: absolute;
    bottom: 40px;
    line-height: 25px;
    letter-spacing: 2px;
  }
}
.total-number-2 {
  position: relative;
  border-left: 5px solid #ffcc41;

  height: 190px;
  .total-item {
    color: #999;
    position: absolute;
    bottom: 40px;
    line-height: 25px;
    letter-spacing: 2px;
  }
}
.total-number-1 {
  position: relative;
  border-left: 5px solid #fb745b;
  margin: 10px 0 0 0;
  height: 190px;
  .total-item {
    color: #999;
    position: absolute;
    bottom: 40px;
    line-height: 25px;
    letter-spacing: 2px;
  }
}
.total-number-img {
  height: 450px;
}

.total-number-img-1 {
  height: 450px;
  margin: 0 0 0 20px;
}
.number-imgame {
  position: absolute;
  top: 25px;
  right: 30px;
}
.number-imgame-1 {
  position: absolute;
  top: 25px;
  right: 50px;
}
.unfinished-item {
  //  background: white;
  height: 390px;
  padding: 1.25rem;
  margin: 0 0 20px 20px;
  background: white;
}
.rencentSeven-item {
  background: white;
  height: 450px;
  padding: 1.25rem;
  margin: 0 0 0 20px;
}
.total-item-chart {
  height: 300px;
}
.title-total {
  font-size: 18px;
  font-weight: bold;
}
.el-card.is-always-shadow {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.repaired-total::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 25%;
  width: 1px;
  height: 50%;
  border-right: 1px solid #d8d8d7;
  box-sizing: border-box;
}
.total-item {
  span {
    padding: 5px 5px;
  }
}
</style>

